<template>
  <div class="home">
   
    <div>
      <HomeTop></HomeTop>
      <HomeRight></HomeRight>
      <HomeSearch></HomeSearch>
        <div class="under-search-text">
          <ul>
            <li @click="goSearch($event)">优质赤小豆</li>
            <li @click="goSearch($event)">有机赤小豆</li>
            <li @click="goSearch($event)">新鲜赤小豆</li>
            <li @click="goSearch($event)">小豆红豆</li>
            <li @click="goSearch($event)">快餐盒</li>
            <li @click="goSearch($event)">垃圾桶</li>
            <li @click="goSearch($event)">笔记本</li>
            <li @click="goSearch($event)">键盘</li>
            <li @click="goSearch($event)">鼠标</li>
            <li @click="goSearch($event)">麦克风</li>
            <li @click="goSearch($event)">对讲机</li>
          </ul>
        </div>
      
        <div class="part2" @click="goSearch($event)">
          <div class="box_left" >
            <h1>分类</h1>
            <div class="one">
              <ul class="one-ul1" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-huore"></i></li>
                <li class="text1" >中秋抢先购</li>
                &nbsp;&nbsp;/
                <li class="text1">官方补贴</li>

              </ul>
            </div>
            <div class="one">
              <ul class="one-ul2" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-diannao"></i></li>
                <li class="text1">电脑</li>
                &nbsp;&nbsp;/
                <li class="text1">配件</li>
                &nbsp;&nbsp;/
                <li class="text1">办公</li>
                &nbsp;&nbsp;/
                <li class="text1">文具</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul3" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-shouji"></i></li>
                <li class="text1">家电</li>
                &nbsp;&nbsp;/
                <li class="text1">手机</li>
                &nbsp;&nbsp;/
                <li class="text1">通信</li>
                &nbsp;&nbsp;/
                <li class="text1">数码</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul4" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-yuan"></i></li>
                <li class="text1">工业品</li>
                &nbsp;/
                <li class="text1">商业</li>
                &nbsp;/
                <li class="text1">农信</li>
                &nbsp;/
                <li class="text1">定制</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul5" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-shafa"></i></li>
                <li class="text1">家具</li>
                &nbsp;&nbsp;/
                <li class="text1">家装</li>
                &nbsp;&nbsp;/
                <li class="text1">家居</li>
                &nbsp;&nbsp;/
                <li class="text1">厨具</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul6" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-yifu"></i></li>
                <li class="text1">女装</li>
                &nbsp;&nbsp;/
                <li class="text1">男装</li>
                &nbsp;&nbsp;/
                <li class="text1">内衣</li>
                &nbsp;&nbsp;/
                <li class="text1">配饰</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul7" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-xiezi"></i></li>
                <li class="text1">女鞋</li>
                &nbsp;&nbsp;/
                <li class="text1">男鞋</li>
                &nbsp;&nbsp;/
                <li class="text1">运动</li>
                &nbsp;&nbsp;/
                <li class="text1">户外</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul8" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-qiche"></i></li>
                <li class="text1">汽车</li>
                &nbsp;&nbsp;/
                <li class="text1">珠宝</li>
                &nbsp;&nbsp;/
                <li class="text1">文玩</li>
                &nbsp;&nbsp;/
                <li class="text1">箱包</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul9" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-pingguo"></i></li>
                <li class="text1">食品</li>
                &nbsp;&nbsp;/
                <li class="text1">生鲜</li>
                &nbsp;&nbsp;/
                <li class="text1">酒类</li>
                &nbsp;&nbsp;/
                <li class="text1">健康</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul10" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-naiping"></i></li>
                <li class="text1">母婴</li>
                &nbsp;&nbsp;/
                <li class="text1">童装</li>
                &nbsp;&nbsp;/
                <li class="text1">玩具</li>
                &nbsp;&nbsp;/
                <li class="text1">宠物</li>
              </ul>
            </div>
            <div class="one">
              <ul class="one-ul11" @mouseenter="boxlefttan = true" @mouseleave="boxlefttan = false">
                <li><i class="iconfont icon-xiangshui"></i></li>
                <li class="text1">美妆</li>
                &nbsp;&nbsp;/
                <li class="text1">个护</li>
                &nbsp;&nbsp;/
                <li class="text1">娱乐</li>
                &nbsp;&nbsp;/
                <li class="text1">图书</li>
              </ul>
            </div>

          </div>
          <div class="box_left_tan" v-show="boxlefttan" @mouseenter="boxlefttan = true"
            @mouseleave="boxlefttan = false">
            <ul class="box_left_tan_ul">
              <ul>
                <li>苹果</li>
                <li>西瓜</li>
                <li>香蕉</li>
                <li>面包</li>
                <li>火腿</li>
                <li>桃子</li>
              </ul>
              <ul>
                <li>苹果</li>
                <li>西瓜</li>
                <li>香蕉</li>
                <li>面包</li>
                <li>火腿</li>
                <li>桃子</li>
              </ul>
              <ul>
                <li>苹果</li>
                <li>西瓜</li>
                <li>香蕉</li>
                <li>面包</li>
                <li>火腿</li>
                <li>桃子</li>
              </ul>
              <ul>
                <li>苹果</li>
                <li>西瓜</li>
                <li>香蕉</li>
                <li>面包</li>
                <li>火腿</li>
                <li>桃子</li>
              </ul>
              <ul>
                <li>苹果</li>
                <li>西瓜</li>
                <li>香蕉</li>
                <li>面包</li>
                <li>火腿</li>
                <li>桃子</li>
              </ul>
              <ul>
                <li>苹果</li>
                <li>西瓜</li>
                <li>香蕉</li>
                <li>面包</li>
                <li>火腿</li>
                <li>桃子</li>
              </ul>
            </ul>
          </div>
          <div class="box_center" @click="Lunbogosearch($event,currentIndex)">
            <div class="text_top">
              <h1 @mouseenter="leftrigthbutton=true" @mouseleave="leftrigthbutton=false">{{this.imgtext1[currentIndex]}}</h1>
              <h1 @mouseenter="leftrigthbutton=true" @mouseleave="leftrigthbutton=false">{{ this.imgtext2[currentIndex] }}</h1>
              <h4 @mouseenter="leftrigthbutton=true" @mouseleave="leftrigthbutton=false">{{ this.imgtext3[currentIndex] }}</h4>
            </div>
            
            <a href="#"><img id="show-img" 
                :src="img[currentIndex]" alt="展示图片" ></a>
              <div class="center-img-cover" @mouseenter="leftrigthbutton=true;allowchangeimg=false" @mouseleave="leftrigthbutton=false;allowchangeimg=true">
                <div class="left_button" @click="pointChange" @mouseenter="leftrigthbutton=true" ><i
                class="iconfont icon-shangyige" id="left_button" v-show="leftrigthbutton" @click="previmg"></i></div>
            <div  class="right_button" @click="pointChange" @mouseenter="leftrigthbutton=true" ><i
                class="iconfont icon-xiayige" id="right_button" v-show="leftrigthbutton" @click="nextimg"></i></div>
              </div>
            <div class="text_bottom"></div>
            <div id="point" class="point" >
              <i id="imgpoint" v-for="(value, index) in img" :key="index" class="iconfont icon-weixuanzhongyuanquan" @click="clickpoint(index)">
              </i>
            </div>
          </div>
          <div class="box_right">
            <ul>
              <li class="one">
                <a href="#">
                  <div><img
                      src="https://img.alicdn.com/imgextra/i2/O1CN01qceCje1JrbZc8E0Qi_!!6000000001082-2-tps-512-176.png" @click="ImggoSearch('家居')" />
                  </div>
                </a>
              </li>
              <li class="two">
                <a href="#">
                  <div><img
                      src="https://img.alicdn.com/imgextra/i3/O1CN016YKcXX28kJftC6PXB_!!6000000007970-2-tps-512-176.png"  @click="ImggoSearch('美妆')" />
                  </div>
                </a>
              </li>
              <li class="three">
                <a href="#">
                  <div><img
                      src="https://img.alicdn.com/imgextra/i1/O1CN01bWoqwD1nFzWEe55WO_!!6000000005061-2-tps-512-176.png" @click="ImggoSearch('五金工具')"/>
                  </div>
                </a>
              </li>
              <li class="four">
                <a href="#">
                  <div><img
                      src="https://img.alicdn.com/imgextra/i1/O1CN01UoFupT1WnZ5J5rKta_!!6000000002833-2-tps-512-176.png" @click="ImggoSearch('日用百货')"/>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        
        </div>


        <div class="center-white">
          <img src="https://gw.alicdn.com/imgextra/i2/O1CN011E0R1J23w9lJDeJXk_!!6000000007319-2-tps-192-192.png">
        </div>
        <div class="center-white-text">
          <h2>猜你喜欢</h2>
          <h3>精选好物推荐</h3>
        </div>
        <div class="shopping-list">
          <div class="row">
          
          <div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div>
              </router-link>
            </div>
            <div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div>
            <div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div>
            <div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div>
            <div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div>
            <div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div>
          </div>
          <!--第二行-->
          <div class="row">
            <div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div><div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div><div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div><div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div><div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div><div class="row-item">
          <router-link to="/ProductView" class="home-router-link">
              <img
                  src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg">
              <div class="text2">
                <span>森系绿色辣妹斜肩短袖t恤女夏季2025新款挂脖针织衫显瘦露肩上衣</span>
              </div>
              <div class="price">
                <span>￥</span>
                <span>299.00</span>
              </div></router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    
</template>

<script>
import "../style/HomeView.css";
import HomeTop from "@/components/HomeTop.vue";

import HomeSearch from "@/components/HomeSearch.vue";
export default {
  name: "HomeView",
  data() {
    return {
      timer: null,
      allowchangeimg: true,
      boxlefttan: false,
      leftrigthbutton: false,
      currentIndex: 0,
      imgtext:["手机","家居"],
      img: [
        "https://gw.alicdn.com/imgextra/i1/O1CN01uBRTuf1Wjtwe3RkSw_!!6000000002825-1-tps-2112-800.gif",
        "https://gw.alicdn.com/imgextra/i2/O1CN01NqA59V1VJxteoNtLt_!!6000000002633-1-tps-2112-800.gif",
      ],
      imgtext1: ["潮电数码抢24期免息", "秒杀大牌抢购"],
      imgtext2: ["数码换新，数码焕新 不止5折", "潮玩秒杀，惊人价格"],
      imgtext3: ["官方正品，在线选购", "正品行货，精致服务"],
    };
  },
  methods: {
   ChangeSlide(){
      this.nextimg();
      this.pointChange();
   },
    previmg() {
      this.currentIndex =
        (this.currentIndex - 1 + this.img.length) % this.img.length;
    },
    nextimg() {
      this.currentIndex = (this.currentIndex + 1) % this.img.length;
    },

pointChange(){
const Element=document.getElementById("point");
const iTag=Element.getElementsByTagName("i");
for(let i=0;i<iTag.length;i++){
iTag[i].style.background="white";
}
iTag[this.currentIndex].style.background="grey";
},
clickpoint(index){
  this.currentIndex=index;
  this.pointChange();
},
goSearch(event){
 
  const element=event.target;

  const data=element.innerText;
  if(element.tagName === "LI"){
  this.$router.push({
    path:"/SearchView",
    query:{
      value:data
    }
  })
}
},
ImggoSearch(data){


  this.$router.push({
    path:"/SearchView",
    query:{
      value:data
    }
  })

},
Lunbogosearch(event,index){
  const element=event.target;
  const data=this.imgtext[index];
 
  if(element.id!=="left_button"&&element.id!=="right_button"&&element.id!=="imgpoint"){
this.$router.push({
    path:"/SearchView",
    query:{
      value:data
    }
  })
}
},
  },
 watch: {
 
    allowchangeimg(newVal) {
    if (newVal === false) { 
      // 停止轮播：清除定时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null; // 显式置空，避免残留引用
      }
    } else { 
      // 启动轮播：先清旧的，再建新的
      if (this.timer) clearInterval(this.timer); 
      this.timer = setInterval(this.ChangeSlide, 5000);
    }
  }
},
  mounted() {
    const Element = document.getElementById("point");
    const iTag = Element.getElementsByTagName("i");
    iTag[this.currentIndex].style.background = "grey";
    this.timer = setInterval(this.ChangeSlide, 5000);
  },
  beforeDestroy() {
  // 清除定时器
  if (this.timer) {
    clearInterval(this.timer);
    this.timer = null; // 释放引用
  }
}
};
</script>
